<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>报名签约</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/static/admin/layui/css/layui.css" rel="stylesheet">
    <link rel="shortcut icon" href="/favicon.ico"> <link href="/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="/static/admin/css/animate.css" rel="stylesheet">
    <link href="/static/admin/css/style.css?v=4.1.0" rel="stylesheet">


    <link href="/static/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/static/admin/css/animate.css" rel="stylesheet">
    <link href="/static/admin/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/static/admin/css/plugins/steps/jquery.steps.css" rel="stylesheet">
    <link href="/static/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <style>
        .wizard > .content{
            height: 600px;
            background: white;
        }
        .wizard > .content tr{
            line-height: 10px;

        }
        .wizard > .content > .body input{
            display: inline-block;
            
        }
        .wizard > .content > .body label{
            margin-bottom: 0;
        }
        .checkbox label, .radio label{
            padding-left: 0;
        }
        .table-hover>tbody>tr:hover{
            background-color: #eaeaea;
        }
        .checkbox, .radio{
            margin-top: 0;
            margin-bottom: 0;
        }
        .resShow{
            position: unset;
        }
      
        .form-group-back{
            /* height: 100%; */
            /* overflow: auto; */
            border: 1px #e0dede solid;
            background: #f5f5f5;
            padding: 5px;
        }
        .input-group .form-control{
            width: 100%;
        }
        .btn-group-sm>.btn, .btn-sm{
            padding: 5px 30px;
        }

        .form-group .col-sm-6{
            width : 100%;
        }
        .loadzdy{
            position: absolute;
                left: 0;
                top : 0;

            z-index: 100;
            width: 100%;
            height: 100%;
            background: none;
            /* opacity: 0.01; */
        }
        .loadzdy .sk-spinner-wave.sk-spinner{
            margin-top: 110px;
        }
        .text-h4{
            display: inline-block;
        }
        .form-group table tbody{
            height: 300px;
            display: inline-block;
            overflow-y: scroll;
        }
        .form-group table tbody{
            background: #fdfdfd;
        }

        .wizard > .actions{
            text-align: left;
            margin-top: 35px;
        }

        table thead, table tbody tr {
            display:table;
            width:100%;
            table-layout:fixed;
        }
        
        /* table thead {
            width: calc( 100% - 1em )
        } */
        th{
            border-bottom: 0;
        }
        table tbody::-webkit-scrollbar {
            display: none;
            width: 2px;
        }
        .wizard > .content > .body{
            width : 100%;
        }
        .wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active{
            background: #23b7e6;
        }
        .wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active{
            background: #6ad3f5;
        }
        .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{
            background: #24b7e6;
        }
        .fieldsethide{
            display: none;
        }
    </style>

</head>

<body class="gray-bg">
    <!-- <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2>报名签约</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{:url('Index/admin')}">主页</a>
                </li>
                <li>
                    <strong>报名签约</strong>
                </li>
            </ol>
        </div>
    </div> -->
    <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox">
                            <div class="ibox-title">
                                <h5>报名向导</h5>
                            </div>
                            <div class="ibox-content">
                                <!-- <h2>
                                    带验证的表单向导
                                </h2>
                                <p>
                                    下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
                                </p> -->
        
                                <form id="form" action="form_wizard.html#" class="wizard-big">
                                    <!-- 填写基本信息 -->
                                    <h1>报名信息</h1>
                                    <fieldset class="editInfo">
                                        <h2>报名信息</h2>
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <div class="form-group">
                                                    <label>发票号 *</label>
                                                    <input  name="receipt" type="text" class="form-control required">
                                                </div>
                                                <div class="form-group">
                                                    <label>报名费 *</label>
                                                    <input  name="registeryFee" type="text" class="form-control required">
                                                </div>
                                                <div class="form-group">
                                                    <label>报名课程 *</label>
                                                    <input name="course" type="text" class="form-control required">
                                                </div>
                                                <div class="form-group">
                                                    <label>咨询顾问 *</label>
                                                    <input name="consultant" readonly type="text" value="{$zxs['username']}"  class="form-control required">
                                                </div>
                                                <div class="form-group">
                                                    <label>报名时间 *</label>
                                                    <input name="registeryDate" readonly type="text" id="registeryDate" class="form-control required">
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>

                                    <!-- 关系资源查询 选择 -->
                                    <h1>关系资源</h1>
                                    <fieldset class="resShow fieldsethide" >
                                        <h2>关系资源搜索</h2>
                                        <div class="row">
                                            <div class="col-sm-8">
                                                <div class="form-group">
                                                    <div class="input-group col-sm-6">
                                                        <input type="text" id="searchInput" value="{$res['sname']}" placeholder="请输入关键词" class="input-sm form-control">
                                                        <span class="input-group-btn">
                                                            <button type="button" id="searchBtn" class="btn btn-sm btn-primary"> 搜索</button> 
                                                        </span>
                                                    </div>
                                                    
                                                </div>
                                                
                                            </div>

                                            <div class="col-sm-8">
                                                <!-- 按条件搜索关系资源 -->
                                                <h4>搜索结果</h4>
                                                <div class="form-group form-group-back">
                                                        <table class="table appTr icheckTable table-hover col-sm-8" >
                                                                
                                                                <thead>
                                                                    <tr>
                                                                        <th>
                                                                            <div class="checkbox i-checks">
                                                                                <label>
                                                                                    <input type="checkbox" value="" id="checkboxAll"> <i></i>全选</label>
                                                                            </div>
                                                                        </th>
                                                                        <th>#</th>
                                                                        <th>学生姓名</th>
                                                                        <th>学生联系方式</th>
                                                                        <th>咨询人姓名</th>
                                                                        <th>咨询者联系方式</th>
                                                                        <th>咨询人与学生的关系</th>
                                                                        <th>状态</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody >
                                                                    <tr>
                                                                    </tr>
                                                                </tbody>
                                                        </table>
                                                        <div style="clear: both"></div>
                                                        <div class="ibox-content loadzdy">
                                                                <div class="sk-spinner sk-spinner-wave">
                                                                        <div class="sk-rect1"></div>
                                                                        <div class="sk-rect2"></div>
                                                                        <div class="sk-rect3"></div>
                                                                        <div class="sk-rect4"></div>
                                                                        <div class="sk-rect5"></div>
                                                                </div>
                                                        </div>
                                                </div>
                                                
                                            </div>
                                            <!-- 已选中的关系资源 -->
                                            <div class="col-sm-4">
                                                    <h4>已选中</h4>
                                                    <div class="form-group form-group-back">
                                                            <table class="table  table-hover col-sm-8" >
                                                                    
                                                                    <thead>
                                                                        <tr>
                                                                            <th>#</th>
                                                                            <th>学生姓名</th>
                                                                            <th>咨询人姓名</th>
                                                                            <th>操作</th>
                                                                            
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody id="delItemTB">
                                                                        <tr>
                                                                        </tr>
                                                                    </tbody>
                                                            </table>
                                                            <div style="clear: both"></div>
                                                    </div>
                                            </dividj>
                                            
                                        </div>
                                    </fieldset>

                                    <!-- 完成 查看确认 填写的内容 和 选中的关系资源-->
                                    <h1>完成</h1>
                                    <fieldset class="infoDetails fieldsethide">
                                        
                                        <div class="col-sm-12">
                                            <div class="">

                                                <h2>确认信息</h2>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <h4>发票号：<span class="text-navy invoiceStr" class=""></span></h4>
                                                        <h4 class="text-h4">报名课程：</h4><span class="courseStr"></span><br/>
                                                        <h4 class="text-h4">报名费用：</h4><span class="registeryFee"></span>
                                                    </div>

                                                    <div class="col-sm-6">
                                                        <h4 class="text-h4">咨询顾问：</h4><span>{$zxs['username']}</span></<h4><br/>
                                                        <h4 class="text-h4">学生姓名：</h4><span>{$res['sname']}</span></<h4><br/>
                                                        <h4 class="text-h4">报名时间：</h4><span class="registeryDate"></span></<h4>
                                                    </div>
                                                </div>

                                            </div>
                                            <h3 style="margin-top: 10px;border-top:1px #ccc solid;padding-top: 10px;">相关资源</h3>
                                            <div class="form-group form-group-back col-sm-8">
                                                
                                                    <table class="table table-hover appTr2" >
                                                            <thead>
                                                                <tr>
                                                                    <th>#</th>
                                                                    <th>学生姓名</th>
                                                                    <th>学生联系方式</th>
                                                                    <th>咨询人姓名</th>
                                                                    <th>咨询者联系方式</th>
                                                                    <th>咨询人与学生的关系</th>
                                                                    <th>状态</th>
                                                                </tr>
                                                            </thead>
                                                                <tbody>
                                                                </tbody>
                                                        </table>

                                                    <div style="clear: both"></div>
                                                    <div class="ibox-content loadzdy">
                                                            <div class="spiner-example">
                                                                    <div class="sk-spinner sk-spinner-wave">
                                                                        <div class="sk-rect1"></div>
                                                                        <div class="sk-rect2"></div>
                                                                        <div class="sk-rect3"></div>
                                                                        <div class="sk-rect4"></div>
                                                                        <div class="sk-rect5"></div>
                                                                    </div>
                                                            </div>
                                                    </div>
                                            </div>
                                            
                                        </div>

                                        <!-- <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
                                        <label for="acceptTerms">我同意注册条款</label> -->

                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
        
                </div>
            </div>
    </div>
 
    <!-- 全局js -->
    <script src="/static/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/admin/js/bootstrap.min.js?v=3.3.6"></script>
    
    <!-- 自定义js -->
    <script src="/static/admin/js/content.js?v=1.0.0"></script>
    <script src="/static/admin/layui/layui.js"></script>
    <!-- <script src="/static/admin/layui/lay/modules/layer.js"></script> -->

     <!-- Steps -->
     <script src="/static/admin/js/plugins/staps/jquery.steps.min.js"></script>

     <!-- Jquery Validate -->
     <script src="/static/admin/js/plugins/validate/jquery.validate.min.js"></script>
     <script src="/static/admin/js/plugins/validate/messages_zh.min.js"></script>

      <!-- Peity -->
    <script src="/static/admin/js/plugins/peity/jquery.peity.min.js"></script>
    <!-- iCheck -->
    <script src="/static/admin/js/plugins/iCheck/icheck.min.js"></script>
 

    <script>
         var selectRes = new Array();

         $(document).ready(function () {
            $("#wizard").steps();
            $("#form").steps({
                bodyTag: "fieldset",
                onStepChanging: function (event, currentIndex, newIndex) {
                    // Always allow going backward even if the current step contains invalid fields!
                    if (currentIndex > newIndex) {
                        return true;
                    }

                    // Forbid suppressing "Warning" step if the user is to young
                    if (newIndex === 3 && Number($("#age").val()) < 18) {
                        return false;
                    }

                    var form = $(this);

                    // Clean up if user went backward before
                    if (currentIndex < newIndex) {
                        // To remove error styles
                        $(".body:eq(" + newIndex + ") label.error", form).remove();
                        $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                    }

                    // Disable validation on fields that are disabled or hidden.
                    form.validate().settings.ignore = ":disabled,:hidden";
                    
                    // Start validation; Prevent going forward if false
                    return form.valid();
                },
                onCanceled : function(event, currentIndex, priorIndex){
                    
                        window.location.href = "{:url('Counselors/varlist')}";
                },
                onStepChanged: function (event, currentIndex, priorIndex) {
                    // Suppress (skip) "Warning" step if the user is old enough.
                    if (currentIndex === 2 && Number($("#age").val()) >= 18) {
                        $(this).steps("next");
                    }
                    
                    // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                    if (currentIndex === 2 && priorIndex === 3) {
                        $(this).steps("previous");
                    }
                    if(currentIndex==2){
                        confirmInfo();
                    }

                },
                onFinishing: function (event, currentIndex) {
                    var form = $(this);

                    // Disable validation on fields that are disabled.
                    // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                    form.validate().settings.ignore = ":disabled";

                    // Start validation; Prevent form submission if false
                    return form.valid();
                },
                onFinished: function (event, currentIndex) {
                    var form = $(this);
                    var data = form.serializeArray();
                    var selectResStr = JSON.stringify(selectRes);
                    
                    data.push({name:'idArr',value:selectResStr}); 
                    data.push({name:'resid',value:"{$res['sid']}"}); 

                    layui.use(['layer'], function(){
                        var layer = layui.layer;
                        $.ajax({
                            url : "{:url('Signing/submit')}",
                            type : 'post',
                            data : data,
                            success : function(data){
                               
                                if(data.code){
                                    layer.msg(data.msg,{time:2000},function(){
                                        window.location.href = "{:url('Counselors/varlist')}";
                                    });
                                }else{
                                    layer.msg(data.msg,{time:2000},function(){
                                        window.location.href = "{:url('Counselors/varlist')}";
                                    });
                                }
                            },
                            error: function(re){
                                layer.msg('请求失败');
                            }
                        });
                    });
                    // Submit form input
                    // form.submit();
                }
            }).validate({
                errorPlacement: function (error, element) {
                    element.before(error);
                },
                rules: {
                    confirm: {
                        equalTo: "#password"
                    }
                }
            });
        
            function confirmInfo(){  //
                var id = JSON.stringify(selectRes);
                $(".appTr2 ~ .loadzdy").show();
                $.ajax({
                    url: "{:url('Signing/searchJson')}",
                    type : 'post',
                    data : {id : id},
                    success:function(data){
                        var data = JSON.parse(data);
                        $('.appTr2 tbody').empty();
                        data.map(d=>{  //将json数据中的null 转换为 ''
                            Object.keys(d).forEach((k)=>d[k]=d[k]||'')
                            return d;
                        });
                        $.each(data,function(i,v){
                            var sid = v['sid'],
                            sname = v['sname'],
                            stel  = v['stel'],
                            zxrName = v['zxr_name'],//咨询人姓名
                            zxrTel  = v['zxr_tel'], //咨询人电话
                            rapport = v['rapport'], 
                            status  = v['sstatus'];
                            
                            var trStr = 
                                "<tr>"+
                                    "<td>"+sid+"</td>"+
                                    "<td>"+sname+"</td>"+
                                    "<td>"+stel+"</td>"+
                                    "<td>"+zxrName+"</td>"+
                                    "<td>"+zxrTel+"</td>"+
                                    "<td>"+rapport+"</td>"+
                                    "<td>"+status+"</td>"+
                                "</tr>";
                                    var trHtml = $(trStr);
                                    $('.appTr2 tbody').append(trHtml);
                                    
                        });

                        $(".appTr2 ~ .loadzdy").hide();
                    }
                });

                
                $('.infoDetails .invoiceStr').text( $(".editInfo input[name='receipt']").val() );
                $('.infoDetails .courseStr').text( $(".editInfo input[name='course']").val() );
                $('.infoDetails .registeryDate').text( $(".editInfo input[name='registeryDate']").val() );
                $('.infoDetails .registeryFee').text( $(".editInfo input[name='registeryFee']").val() );
            }

            //获取当前已选中的checkbox 的 data-id 即 sid
            function checkedId(elem) {
                id = new Array();
                $(elem).each(function () {
                    var delFlag = $(this).is(":checked");
                    if (delFlag) {
                        id.push($(this).attr('data-id'));
                    }
                });
                return  id;
            }
            
        });


        
        
        
        $(function(){
            getRes("{$res['sname']}");
            
            function getRes(key){  //搜索并获取匹配结果
                $(".appTr ~ .loadzdy").show();  //显示加载图层
                //加载相关资源数据
                $.ajax({
                    url: "{:url('Signing/searchJson')}",
                    type : 'post',
                    data : {key: key,thisid:"{$res['sid']}"},
                    success:function(data){
                        var data = JSON.parse(data);
                        $('.appTr tbody').empty();
                        data.map(d=>{  //将json数据中的null 转换为 ''
                            Object.keys(d).forEach((k)=>d[k]=d[k]||'')
                            return d
                        })
                        $.each(data,function(i,v){
                            var sid = v['sid'],
                            sname = v['sname'],
                            stel  = v['stel'],
                            zxrName = v['zxr_name'],//咨询人姓名
                            zxrTel  = v['zxr_tel'], //咨询人电话
                            rapport = v['rapport'], 
                            status  = v['sstatus'];
                            
                            var trStr = 
                                "<tr>"+
                                    "<td>"+
                                        "<div class=\"checkbox i-checks\">"+
                                            "<label>"+
                                                "<input  type='checkbox' value='' data-id='"+sid+"' class='checkboxSon'><i></i>"+
                                            "</label>"+
                                        "</div>"+
                                    "</td>"+
                                    "<td>"+sid+"</td>"+
                                    "<td>"+sname+"</td>"+
                                    "<td>"+stel+"</td>"+
                                    "<td>"+zxrName+"</td>"+
                                    "<td>"+zxrTel+"</td>"+
                                    "<td>"+rapport+"</td>"+
                                    "<td>"+status+"</td>"+
                                "</tr>";
                                    var trHtml = $(trStr);
                                    $('.appTr tbody').append(trHtml);
                                    
                                });
                                $.each(selectRes,function(i,v){
                                    $(".icheckTable tbody .checkboxSon[data-id='"+v+"']").iCheck('check');
                                });
                                $(".appTr ~ .loadzdy").hide();
                                initializeICheck();//初始化 iCheck 自定义功能
                                // $('.fieldsethide').css('display','block'); //显示隐藏的 fieldset
                    }
                });
            }
            
            // 点击或回车搜索
            $('#searchBtn').click(function(){
                var key = $("#searchInput").val();
                getRes(key);
            
            });

            $('#searchInput').keydown(function(ev){ //按下Enter键 搜索
                var ev = ev||event;
                if(ev.keyCode==13) $('#searchBtn').click();
            });

            function initializeICheck (){
                // 初始化 ichecks 
                $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });

                //当有子按钮取消选中时 就将全选按钮取消选中
                $(".icheckTable input[class='checkboxSon']").on('ifUnchecked', function(){
                    $('.icheckTable #checkboxAll').iCheck('uncheck');
                });

                //当选中时
                $(".icheckTable input[class='checkboxSon']").on('ifClicked',function(){
                    var isChecked = $(this).is(":checked");
                    var id = $(this).attr('data-id');
                    addDElRes(id,isChecked,$(this));
                    
                });
                
                //多选功能开始
                //全选 全不选
                $('.icheckTable #checkboxAll').on('ifClicked', function () {
                    
                    var delFlag = $(this).is(":checked"); // 全选按钮是否状态是否为选中
                    if (!delFlag) { //如果未选中,则当前单击后则会成为选中 所有这时是全选
                        $(".icheckTable input[class='checkboxSon']").not("[disabled]").each(function () {
                            var id = $(this).attr('data-id');
                            var index = selectRes.indexOf(id);
                            addDElRes(id,false,$(this));
                            $(this).iCheck('check');
                        });
                    } else { //与上面相反
                        $(".icheckTable input[class='checkboxSon']").not("[disabled]").each(function () {
                            var id = $(this).attr('data-id');
                            var index = selectRes.indexOf(id);
                            addDElRes(id,true,$(this));
                            $(this).iCheck('uncheck');
                        });
                        
                    }
                    
                });


                //移除已选定资源
                $('#delItemTB').on('click','.delItem',function(){
                        
                        var id = $(this).attr('data-id');
                        var index = selectRes.indexOf(id);
                        
                        selectRes.splice(index,1);
                        $("#delItemTB #"+id).remove();
                       
                        $(".icheckTable tbody .checkboxSon[data-id='"+id+"']").iCheck('uncheck');
                });

                //实现资源选中和取消选中后的添加删除
                function addDElRes(id,isChecked,elem){
                    var tdAll = $(elem).parents('tr').children('td');
                    var sName = $(tdAll).eq(2).text(), zxrName = $(tdAll).eq(4).text();
                 
                    var index = selectRes.indexOf(id);
                    if(!isChecked && index<=-1){
                        selectRes.push(id);
                        var trStr = 
                                "<tr id = '"+id+"'>"+
                                    "<td>"+id+"</td>"+
                                    "<td>"+sName+"</td>"+
                                    "<td>"+zxrName+"</td>"+
                                    "<td><a href='javascript:;' class='delItem' data-id='"+id+"'>移除</a></td>"+
                                "</tr>";
                                var trHtml = $(trStr);
                                $('#delItemTB').append(trHtml);

                    }else if(isChecked && index >-1){
                        selectRes.splice(index,1)
                        $("#delItemTB #"+id).remove();
                    }

                    

                    
                }
            }
            //多选功能结束
            
        });
        
        layui.use(['layer','laydate'], function(){
            var $ = layui.jquery, layer = layui.layer,laydate = layui.laydate;
            laydate.render({  //下次回访时间
                elem    : '#registeryDate', 
                event   : 'focus' ,  //获得焦点是触发
            });
        });
    </script>
    

</body>

</html>
